<template>
  <div style="width:1200px; margin:0 auto">
    <Header></Header>

    <div style="width:300px; margin:0 auto; text-align: center">
      扫一扫付款(元)
      <div style="font-size: larger;color: red">￥{{(money * 0.01).toFixed(2)}}</div>
      <img class="lazy" alt="付款码" :src=payPicture width="250" height="250">
      <div><el-button type="success" @click="pay">确认支付</el-button></div>
    </div>

    <Footer></Footer>
  </div>


</template>

<script>
  import Footer from '@/components/Footer'
  import Header from '@/components/Header'
  import orderApi from '@/api/order'

  export default {
    components: {
      Footer,
      Header
    },
    data() {
      return {
        payPicture: 'http://scau-bookstore.oss-cn-shenzhen.aliyuncs.com/picture2?Expires=1877190433&OSSAccessKeyId=LTAIfi8teV3C3nwn&Signature=04A8ZSzCjSlU6I66JoS1xSlcd5A%3D',
        money: 0,
        orderId: 0,
        address: ''
      }
    },
    created() {
      this.money = this.$route.params.totalPrice
      this.orderId = this.$route.params.orderId
      this.address = this.$route.params.address
    },
    methods: {
      pay() {
        console.log('orderId:' + this.orderId)
        orderApi.pay(this.orderId).then(response => {
          this.$message({
            message: '支付成功',
            type: 'success'
          })
          this.$router.push({
            path: '/front/pay/success',
            name: 'PaySuccess',
            params: {
              totalPrice: this.money,
              address: this.address
            }
          })
        })
      }
    }
  }
</script>

<style>
</style>
